<?php
echo $javascript->link(array('autocomplete/jquery.tokeninput'));
echo $this->Html->css(array('autocomplete/front_adjectives/token-input-rtu'));
?>
<div class="like-text">
    <h1 id="h1" original-title="Title">How Much do You Like</h1>
    <div class="ques"> <?php echo $this->Html->image('front/ques.png', array('alt' => 'SKIP', 'title' => 'skip')); ?></div>
    <div class="skip"> <a href="#">&nbsp;</a></div>
</div>

<div class="meter-area">
    <div id="slider">
        <?php foreach ($subjects as $subject) { ?>
            <div>
                <div class="image-display">
                    <?php
                    $thumbnail = $this->PhpThumb->generate(
                                    array(
                                        'save_path' => WWW_ROOT . 'img/uploads/Subjects/thumbs',
                                        'display_path' => 'uploads/Subjects/thumbs',
                                        'error_image_path' => 'error.png',
                                        'src' => WWW_ROOT . "img/uploads/Subjects/" . $subject['Subject']['image'],
                                        'w' => 207,
                                        'h' => 192,
                                        'q' => 70,
                                        'zc' => 1
                                    )
                    );
                    echo $this->Html->image($thumbnail['src'], array('width' => $thumbnail['w'], 'height' => $thumbnail['h'], 'title' => $subject['Subject']['subject'], 'alt' => $subject['Subject']['subject']));
                    ?></div>
                <div class="meter-right">
                    <div class="txt">
                        <h2 ><?php
                echo str_replace('_', ' ', $subject['Subject']['subject']);
                if (!empty($subject['Subject']['desc'])) {
                    echo " (" . $subject['Subject']['desc'] . ")";
                }
                    ?>
                        </h2>
                        <div class="meter-div">
                            <!-- Slider -->

                            <div class="slider-range-min" id="<?php __($subject['Subject']['id']) ?>" name="<?php __(str_replace('_', ' ', $subject['Subject']['subject'])); ?>" imagename="<?php echo $subject['Subject']['image']; ?>"> </div>
                        </div>
                    </div>
                </div>
            </div>
        <?php } ?>
    </div>
</div>
<input type="hidden" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />

<div class="body-container">
    <div class="subject">
        <h3>Rate a Different Subject</h3>
        <?php
        echo $this->Form->create('Subject');
        echo $this->Form->input('Subject.name', array('label' => '', 'value' => 'Enter here', 'onclick' => 'this.value=""'));
        echo $this->Form->end(array('label' => '', 'style' => 'display:none;'));
        ?>

    </div>
    <div class="content">
        <div class="box">
            <h4>What is Rate The Universe ?</h4>
            <?php __($what_is_rtu['Facts']['description']); ?>
        </div>
        <div class="box">
            <h4>fun fact</h4>
            <?php __($fun_facts['Facts']['description']); ?>
        </div>
        <div class="box nomargin">
            <h4>Did you know ?</h4>
            <?php __($did_u_know['Facts']['description']); ?>
        </div>
        <div class="most-rated">
            <h5>Most Rated Subject Today</h5>
            <ul>
                <?php
                //debug($mostrated);
                foreach ($mostrated as $subject):
                    $thumbnail = $this->PhpThumb->generate(
                                    array(
                                        'save_path' => WWW_ROOT . 'img/uploads/Subjects/thumbs',
                                        'display_path' => 'uploads/Subjects/thumbs',
                                        'error_image_path' => 'error.png',
                                        'src' => WWW_ROOT . "img/uploads/Subjects/" . $subject['Subject']['image'],
                                        'w' => 66,
                                        'h' => 66,
                                        'q' => 100,
                                        'zc' => 1
                                    )
                    );
                    ?>
                    <li>
                        <?php
                        echo $this->Html->link($this->Html->image($thumbnail['src'], array('class' => 'latest_img', 'width' => $thumbnail['w'], 'height' => $thumbnail['h'], 'title' => $subject['Subject']['subject'], 'alt' => $subject['Subject']['subject'])), array('controller' => 'Subjects', 'action' => 'subject', $subject['Subject']['id']), array('escape' => false));
                        ?>

                    </li>
                <?php endforeach; ?>

            </ul>
        </div>
    </div>
    <div class="fl"><?php echo $this->Html->image('/img/front/bottom-cor.png', array('alt' => 'img1', 'title' => 'img1')); ?></div>
</div>
<div id="popup_container" style="display:none">

    <div id="rating" class="rate">
        <?php
        echo $this->Form->create('Subject', array('action' => 'rate'));
        echo $this->Form->input('id', array('type' => 'hidden', 'id' => 'rated_subject'))
        ?>    

        <table cellspacing="0" cellpadding="0" border="0" >
            <tbody>
                <tr>
                    <td colspan="2"><h2>RATE <span id="subjectname"></span></h2></td>
                </tr>
                <tr>
                    <td width="22%">
                        <div id="subjectpopupimage"></div>
                    </td>
                    <td width="78%">
                        <div class="meter-div1">
                            <!-- Slider -->



                            <div id="small-slider-range-min"> </div>
                        </div><input type="hidden" id="small-amount" style="border:0; color:#f6931f; font-weight:bold;" /></td>
                </tr>
                <tr>
                    <td colspan="2"><h3>Add One, Two, or Three Adjectives (optional)</h3></td>
                </tr>
                <tr>
                    <td colspan="2"><?php echo $this->Form->input('adjective1', array('label' => '', 'id' => 'adjective1', 'type' => 'text', 'title' => 'Adjective', 'class' => 'input2')) ?></td>

                </tr>
                <tr>
                    <td colspan="2"><?php echo $this->Form->input('adjective2', array('label' => '', 'id' => 'adjective2', 'type' => 'text', 'title' => 'Adjective', 'class' => 'input2')) ?></td>
                </tr>
                <tr>
                    <td colspan="2"><?php echo $this->Form->input('adjective3', array('label' => '', 'id' => 'adjective3', 'type' => 'text', 'title' => 'Adjective', 'class' => 'input2')) ?></td>
                </tr>
                <tr>
                    <td  colspan="2" ><?php echo $this->Form->end(array('label' => '', 'class' => 'submit-btn')); ?></td>
                </tr>
            </tbody>
        </table>

    </div>

    <div id="login_register" class="register-form">
        <?php echo $this->Form->create('User', array('action' => 'check_login', 'id' => 'login')); ?>
        <table cellspacing="0" cellpadding="0" border="0" >
            <tbody>
                <tr>
                    <td colspan="2"><h2>Login or <span id="register-button">Sign Up</span></h2></td>
                </tr>
                <tr>
                    <td width="30%"><label class="label1">Email</label></td>
                    <td width="70%"><?php echo $this->Form->input('username', array('label' => '', 'id' => 'username', 'class' => 'input2', 'title' => 'Your Login email')); ?></td>
                </tr>
                <tr>
                    <td><label label1>Password</label></td>
                    <td><?php echo $this->Form->input('password', array('label' => '', 'id' => 'password', 'class' => 'input2', 'title' => 'Password')) ?></td>
                </tr>
                <tr>
                    <td colspan="2"><div id="login-error-box" style="color:#f00;">
                        </div>
                    </td></tr>

                <tr>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td ><?php echo $this->Form->end(array('label' => '', 'class' => 'login-btn', 'title' => 'Login')) ?></td>
                </tr>
            </tbody>
        </table>
        </form>
    </div>
</div>
<script language="javascript" >
    $(document).ready(function(){
        var base_url=$('#base-url').text(); // This will be used for all ajax calls as base url
       
         
        $('#slider').bxSlider({
            infiniteLoop: true,
            hideControlOnEnd: false,
            prevImage:base_url+'/img/front/back.png',
            nextImage:base_url+'/img/front/skip.png'
            
        });
        $('.skip').live('click',function(){
            
            $('#sliderD').bxSlider({
                infiniteLoop: false,
                hideControlOnEnd: true
            });
           
        });  
        $('.bx-next').bind('click',function(){
            $( "#amount" ).attr('value','0');
            $( "#small-amount" ).attr('value','0');
            $(".ui-slider-handle" ).html('0');
            $('.ui-slider-handle').css('background-position','0px 0');
            // alert($( "#amount" ).val());
            // alert('sda');
        });   
        $('.bx-prev').bind('click',function(){
           
            $( "#amount" ).attr('value','0');
            $( "#small-amount" ).attr('value','0');
            $('.ui-slider-handle').css('background-position','0px 0');
            $(".ui-slider-handle" ).html('0');
            // alert($( "#amount" ).val());
            // alert('sda');
        }); 
        // OPACITY OF BUTTON SET TO 50%
        $(".latest_img").css("opacity","0.3");
		
        // ON MOUSE OVER
        $(".latest_img").hover(function () {
										  
            // SET OPACITY TO 100%
            $(this).stop().animate({
                opacity: 1.0
            }, "slow");
        },
        // ON MOUSE OUT
        function () {
			
            // SET OPACITY BACK TO 50%
            $(this).stop().animate({
                opacity: 0.3
            }, 4000);
        });
    

        $( "#small-slider-range-min" ).slider({
            range: "min",
            value:0,
            min: 0,
            max: 100,
            slide: function( event, uii ) {
                $( "#small-amount" ).val(uii.value );
                $( "#amount" ).val(uii.value );
                $( ".ui-slider-handle" ).html(uii.value );
                $( ".slider-range-min" ).slider({value:uii.value});
                $(uii.value).each(function(){
                    var i=1;
                    pindex=10;
                    if(uii.value%5=='0' && uii.value!='100'){
                        
                        pindex=-(uii.value*4);
                        //alert(ui.value);
                        $('.ui-slider-handle').css('background-position',pindex+'px 0');
                        i++;
                    }
                    
                });
            }
                        
        });
        //$( "#amount" ).val($( "#small-slider-range-min" ).slider( "value" ) );
		
	
        $( ".slider-range-min" ).slider({
            range: "min",
            value: 0,
            min: 0,
            max: 100,
            stop: function(event, ui) { 
                $(".ui-slider-handle").trigger('click');
            },
            start: function( event, ui ) {
                $( "#amount" ).val(ui.value );
                $( ".ui-slider-handle" ).html(ui.value );
                $( "#rated_subject" ).val($(this).attr('id'));
                $( "#subjectname" ).html($(this).attr('name'));
                $( "#small-slider-range-min" ).slider({value:ui.value});
            },
                
            slide: function( event, ui ) {
               
                $( "#amount" ).val(ui.value );
                $( ".ui-slider-handle" ).html(ui.value );
                $( "#rated_subject" ).val($(this).attr('id'));
                $( "#subjectname" ).html($(this).attr('name'));
                $( "#small-slider-range-min" ).slider({value:ui.value});
                $(ui.value).each(function(){
                    pindex=10
                    if(ui.value%5=='0' && ui.value!='100'){
                        pindex=-(ui.value*4);
                        //alert(ui.value);
                        $('.ui-slider-handle').css('background-position',pindex+'px 0');
                        
                    }
                    
                });
                
                        
            }
        });
          
        //$( "#amount" ).val($( ".slider-range-min" ).slider( "value" ) );
        //$( ".ui-slider-handle" ).html('9');
        $( ".ui-slider-handle" ).html($( ".slider-range-min" ).slider( "value" ) );
         
         
        $('.slider-range-min .ui-slider-handle').fancybox({
            'transitionIn'	:	'elastic',
            'transitionOut'	:	'elastic',
            'speedIn'		:	600, 
            'speedOut'		:	200, 
            'overlayShow'	:	true,
            'href'          :  "#rating",
            'onStart'       :function(){
                //alert($('#'+$('#rated_subject').val()).attr('name'));
                $.ajax({
                    url:base_url+'/Subjects/generatepopupimage',
                    type:'POST',
                    data:{image:$('#'+$('#rated_subject').val()).attr('imagename')},
                    success:function(response){
                        $('#subjectpopupimage').html(response);
                    }
                });
            },
            'onClosed':function(){
                $( "#small-slider-range-min" ).slider({value:0});
                $( ".slider-range-min" ).slider({value:0});
                $( "#amount" ).attr('value','0');
                $( "#small-amount" ).attr('value','0');
                $(".ui-slider-handle" ).html('0');
            }
            //            'onClosed'      :function(){
            //                if($('#adjective1').tokenInput("get").length !='0' || $('#adjective2').tokenInput("get").length !='0'  || $('#adjective3').tokenInput("get").length != '0'){
            //                $('#adjective1').tokenInput("clear").blur();
            //                   $('#adjective2').tokenInput("clear").blur();
            //                      $('#adjective3').tokenInput("clear").blur();
            //                }
            //            }
            //            
                
                
        });
        /*********************** Autocomplete for Adjectives ************************/
        
           
        
        /*********************** Autocomplete for Adjectives Ends ************************/
        
        /*******************Login from popup   *************************/
        $('#login').live('submit',function(){
            if($('#username').val()==''){
                $('#username').attr('title','Enter Username');
                $('#login-error-box').fadeIn(200).html('Enter Your Email').delay(5000).fadeOut(500);;
                return false;
            }else if($('#password').val()==''){
                
                $('#login-error-box').fadeIn(200).html('Enter Password').delay(5000).fadeOut(500);
                return false;
            }
            $.ajax({
                url:base_url+'/Users/check_login' ,
                type:'POST',
                data:{username:$('#username').val(),password:$('#password').val()},
                success:function(res){
                     var response=$.parseJSON(res);
                if(!response.error){
                    $('#login_element').load(base_url+'/Subjects/login_element');
                        $('#login_register').attr('id','rating');
                        $('#rating').attr('id','login_register');
                        //$('#SubjectRateForm').post();
                        $('#SubjectRateForm').trigger('submit');
                }else if (response.error){
                    if(response.type=="1"){
                    $("#login-error-box").css("display","block");
                    $("#login-error-box").html("It seems that You haven't verified your account yet.Please check your email for Verification email and then try again. <span style='font-weight:bold;cursor:pointer; font-size16px;color:#000;' name='"+response.email+"' id='varify_again'>Click Here </span> to resend verification email ");
                }else if(response.type=="2"){
                     $("#login-error-box").css("display","block");
                    $("#login-error-box").html("login failed.Invalid username or password");
                }
                   
                }
                    
                    
                   }
            });
            return false; 
        });
        $('#SubjectRateForm').live('submit',function(){
        
            $.ajax({
                url:base_url+'/Subjects/rate',
                type:'POST',
                data:{subject_id:$('#rated_subject').val(),rating:$('#amount').val(),adj1:$('#adjective1').val(),adj2:$('#adjective2').val(),adj3:$('#adjective3').val()},
                success:function(response){
                    var result= $.parseJSON(response);
                
                    //  $.split(response);
                    if(result.error){
                        if(!result.login){
                            $('#login_register').attr('id','rating');
                            $('#rating').attr('id','login_register');
                            $('.slider-range-min .ui-slider-handle').fancybox({href:'#login_register'});
                            //alert($('#login_register').attr('id'));alert($('#rating').attr('id'));
                            $('.slider-range-min .ui-slider-handle').trigger('click');
                        }else if(!result.canRate){
                            //alert('You Cant rate a Subject within seven days.');//
                        
                            var data='<div class="register-form" style="padding:30px 0 30px 30px;font-size:16px; font-weight:bold;">You Cant rate a Subject Twice within seven days.</div>';
                        
                            $.fancybox(data);
                            //$.alert('You Cant rate a Subject within seven days.');
                        }
                    }else{
                        window.location=base_url+'/Subjects/subject/'+result.subjectID;
                    }
                
                
                }
            });
            return false;
        });
        
        
        /**************************/
        $('#register-button').click(function(){
            $.fancybox.close();
            $('#open').trigger('click');
            
        });
        /**************************/
        
        
        
        $('#adjective1').tokenInput(base_url+"/Subjects/adjectives",{ theme: "rtu",hintText: "Type in a search term",tokenLimit:'1'});
        $('#adjective2').tokenInput(base_url+"/Subjects/adjectives",{hintText: "Type in a search term", theme: "rtu",tokenLimit:'1'});
        $('#adjective3').tokenInput(base_url+"/Subjects/adjectives",{hintText: "Type in a search term", theme: "rtu",tokenLimit:'1'});   
                    
    }
);
    //function to slide 

</script>